import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { actionCreator } from './store';

import {
  DetailWrapper,
  Header,
  Content
} from "./style";

class Detail extends React.Component {
  render() {
    const { title, content } = this.props;
    return (
      <DetailWrapper>
        <Header>{title}</Header>
        {/* 对于HTML文本需要使用dangerouslySetInnerHTML接收转译 */}
        <Content dangerouslySetInnerHTML={{ __html: content }}></Content>
      </DetailWrapper>
    );
  }

  componentDidMount() {
    const { getDetailData, match: { params } } = this.props;

    // const { getDetailData, location: { search } } = this.props;
    // const match = search.match(/id=(\d)/);
    // const params = { id: match[1] };
    getDetailData(params);
  }
}

const mapState = (state) => {
  return {
    title: state.getIn(['detail', 'title']),
    content: state.getIn(['detail', 'content']),
  }
}

const mapDispatch = (dispatch) => {
  return {
    getDetailData(params) {
      dispatch(actionCreator.getDetailData(params))
    }
  }
}
 
export default connect(mapState, mapDispatch)(withRouter(Detail));